{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
    when 'transparent'
      assign background_color = 'bg-transparent'
  endcase

  case section.settings.button_color
    when 'light'
      assign btn_style = 'btn-light'
    when 'dark'
      assign btn_style = 'btn-dark'
    when 'accent1'
      assign btn_style = 'btn-primary'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
    else
      assign text_color = ''
  endcase


  assign show_entry = false
  assign show_tab = false
  for block in section.blocks
    if forloop.first == true
      assign firstType = block.type
    endif
    if block.type == 'entry'
      assign show_entry = true
    endif
    if block.type == 'tab'
      assign show_tab = true
    endif
  endfor

  assign sales_channel_blocks = section.blocks | where: 'type', 'sales_channel'
  assign tab_blocks = section.blocks | where: 'type', 'tab'
  assign section_identifier = '#shopify-section-' | append: section.id 
-%}

{%- style -%}
body main {{ section_identifier }}.active-sticky {
    top: 58px !important;
    background: #ffff;
}
/* Mobile styles */
@media only screen and (max-width: 1151px){

    body main {{ section_identifier }}.active-sticky  {
        top: 56px !important;
        background: #ffff;
    }
   
}
@media(max-width:768px){
  body main {{ section_identifier }}.active-sticky  {
    top: 75px !important;
    background: #ffff;
  }
}
@media only screen and (max-width: 430px){
  body main {{ section_identifier }} .kiks-btn-primary:not(.btn-outline-primary):not(.btn-link):not(.link-primary),
  body main {{ section_identifier }} .kiks-btn-secondary:not(.btn-outline-secondary):not(.btn-link):not(.link-secondary):not(.btn-primary) {
    padding: 8px 32px;
  }
}

{%- endstyle -%}
<label for="sticky-navbar" class="navbar-backdrop as-navbar-backdrop"></label>
<nav class="{{ background_color }} as-navbar-wrapper navbar-wrapper" id="sticky-navbar">
  <div class="as-lg-flag d-lg-none"></div>
  <div id="kiks-{{ section.settings.mobile_layout }}" class="container navbar-container {{ text_color }}">
    <div class="d-flex align-items-center navbar-content">
      {%- if section.settings.product_title != blank -%}
        <a href="#" class="navbar-brand fw-bold">{{ section.settings.product_title }}</a>
      {%- endif -%}
      <div class="d-flex justify-content-start flex-grow-1 d-lg-none">
        {%- if tab_blocks.size > 0 -%}
          <span class="p-2 cursor-pointer as-collapse-toggle toggle-icon icon-wrap-sm">
            {% render 'icon-chevron-down' %}
          </span>
        {%- endif -%}
      </div>
      <div class="as-nav navbar flex-grow-1 nav-item-wrap {{ background_color }} collapse py-0 border-top-0">
        <div class="nav-tab-wrap {{ section.settings.pc_tab_active_style }}">
          <ul class="nav position-relative nav-tab">
            {%- if show_tab -%}
              {%- for block in section.blocks -%}
                {%- if block.type == 'tab' -%}
                  <li class="nav-item">
                    <a data-section-number="{{ block.settings.section_number }}" class="as-tabs nav-link {{ text_color }} {% if firstType == 'tab' %}{% if forloop.first == true %}border-top-0{% endif %}{% endif %}">{{ block.settings.tab_label }}</a>
                  </li>
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          </ul>
      </div>
      {% if block.settings.entry_link != blank %}
      <div class="nav-entry-wrap">
        <ul class="nav position-relative nav-entry py-0">
          {%- if show_entry -%}
            {%- for block in tab_blocks -%}
              <li class="nav-item">
                <a {% render 'link', link: block.settings.entry_link %} {% if block.settings.entry_link != blank %}href="{{ block.settings.entry_link }}"{% endif %} class="nav-link {{ text_color }} {% if firstType == 'entry' %}{% if forloop.first == true %}border-top-0{% endif %}{% endif %}">{{ block.settings.entry_label }}</a>
              </li>
            {%- endfor -%}
          {%- endif -%}
        </ul>
        </div>
         {% endif %}
      </div>
      {% if sales_channel_blocks.size == 0 %}
        {%- if section.settings.button_label != empty -%}
          <div class="navbar-btn">
            {%- if section.settings.button_link != blank -%}
              <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}btn {{ btn_style }} flex-nowrap">
                {{ section.settings.button_label }}
              </a>
            {%- else -%}
              <div class="{% if settings.enable_solid_primary_button %}kiks-btn-primary {% endif %}btn {{ btn_style }} flex-nowrap disabled cursor-default">
                {{ section.settings.button_label }}
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endif -%}

      {%- for block in sales_channel_blocks -%}
        {% if sales_channel_blocks.size == 1 %}
          {% liquid
              case block.settings.button_color
                when 'light'
                  assign btn_style = 'btn-light'
                when 'dark'
                  assign btn_style = 'btn-dark'
                when 'accent1'
                  assign btn_style = 'btn-primary'
              endcase
            %}
          {%- if block.settings.title != blank -%}
            <div class="navbar-btn">
              {%- if block.settings.channel_link != blank -%}
                <a {% render 'link', link: block.settings.channel_link %} href="{{ block.settings.channel_link }}" class="btn {{ btn_style }} flex-nowrap" target="_blank">
                  {{ block.settings.title }}
                </a>
              {%- else -%}
                <div class="btn {{ btn_style }} flex-nowrap disabled cursor-default">
                  {{ block.settings.title }}
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        {% else %}
          <div class="navbar-btn as-sales-channel-modal-btn">
            <a data-bs-toggle="modal" data-bs-target="#sales-channel-modal-for-sticky-navbar" class="btn btn-primary flex-nowrap btn-sm">
              {{ 'sections.sticky_navbar.where_to_buy' | t }}
            </a>
          </div>
        {% endif %}
        {% break %}
      {%- endfor -%}
    </div>
  </div>
</nav>
{% if sales_channel_blocks.size > 1 %}
  {% render 'sales-channel-modal', blocks: sales_channel_blocks, section_name: 'sticky-navbar' %}
{% endif %}
<script>
    window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.kiks-sticky-navbar');
    
    if (window.scrollY > 0) {
        navbar.classList.add('active-sticky');
    } else {
        navbar.classList.remove('active-sticky');
    }
});

</script>
{% schema %}
  {
    "name": "Kiks Sticky navbar",
    "class": "kiks-sticky-navbar sticky-navbar as-sticky-navbar sticky-navbar-customized position-sticky",
    "tag": "section",
    "settings": [
      {
        "type": "text",
        "id": "product_title",
        "default": "Prodcut title",
        "label": "Prodcut title"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "transparent",
            "label": "Transparent"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          }, {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "pc_tab_active_style",
        "label": "Tab hover style",
        "options": [
          {
            "value": "underline",
            "label": "Underline"
          }, 
          {
            "value": "highlight",
            "label": "Highlight"
          },
          {
            "value": "highlight-underline",
            "label": "Highlight & underline"
          }
        ],
        "default": "underline"
      }, {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "default": "Buy now"
      }, 
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }, 
      {
        "type": "select",
        "id": "button_color",
        "label": "Button color",
        "options": [
          {
            "value": "accent1",
            "label": "Accent 1"
          }, {
            "value": "light",
            "label": "White"
          }, {
            "value": "dark",
            "label": "Black"
          }
        ],
        "default": "accent1"
      },
      {
        "type": "select",
        "id": "mobile_layout",
        "label": "Mobile layout",
        "options": [
          {
            "value": "dropdown",
            "label": "Dropdown"
          },
          {
            "value": "show-menu",
            "label": "Show menu"
          }
        ],
        "default": "show-menu"
      }
    ],
    "blocks": [
      {
        "type": "tab",
        "name": "Tab",
        "settings": [
          {
            "type": "text",
            "id": "tab_label",
            "default": "Tab",
            "label": "Tab label"
          }, {
            "type": "text",
            "id": "section_number",
            "label": "Section number",
            "info": "Please enter 3 if you want to anchor to the third section."
          }
        ]
      }, {
        "type": "entry",
        "name": "Entry",
        "settings": [
          {
            "type": "text",
            "id": "entry_label",
            "default": "Item",
            "label": "Entry label"
          }, {
            "type": "url",
            "id": "entry_link",
            "label": "Entry link"
          }
        ]
      }, {
        "type": "sales_channel",
        "name": "Sales channel",
        "settings": [
          {
            "type": "url",
            "id": "channel_link",
            "label": "Channel link"
          }, 
          {
            "label": "Channel logo",
            "type": "image_picker",
            "id": "channel_logo"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Kiks Sticky navbar"
      }
    ]
  }
{% endschema %}